<script lang="ts" setup>
/**
 * Props
 * @value {
 *   province: { name: '', code: '' },
 *   city: { name: '', code: '' },
 *   district: { name: '', code: '' },
 * }
 * 默认省市区选择项
 *
 * @title 标题
 *
 * Emits
 * @value 确认时返回的省市区选项
 *
 * @cancel 取消
 */
import { PropType, reactive, ref } from 'vue'
import { getReq } from '@U/common'
import type { IObj } from '@/interface'

const props = defineProps({
  value: {
    type: Object as PropType<IObj>,
    required: false,
    default: () => ({}),
  },
  title: {
    type: String,
    required: false,
    default: '',
  },
  columnsNum: {
    type: Number,
    required: false,
    default: 3,
  },
})

const emits = defineEmits(['value', 'cancel'])
const cancel = () => emits('cancel')

const loading = ref(false)
const comKey = ['province_list', 'city_list', 'county_list']
const shoudaoSiteList = reactive(<IObj>{
  province_list: {},
  city_list: {},
  county_list: {},
})

// 省市区数据
const AreaList = ref(<IObj>{})
function formatAreaList(site: IObj) {
  const obj: IObj = {}
  Object.keys(site).forEach((key: string) => {
    obj[key] = site[key].name
  })
  return obj
}

// 返回的表单
const form = reactive(<IObj>{
  province: props.value?.province || { name: '', code: '' },
  city: props.value?.city || { name: '', code: '' },
  district: props.value?.district || { name: '', code: '' },
})

// 默认的组件选择项
const defValue = ref('')
const formCode = form.district.code

// 选择项改变
const ok = (piker: IObj) => {
  const value = piker?.target?.values
  let areaArr = []
  if (props.columnsNum === 3) areaArr = ['province', 'city', 'district']
  if (props.columnsNum === 2) areaArr = ['province', 'city']
  areaArr.forEach((key: string, index: number) => {
    form[key].name = value[index].name
    form[key].code = shoudaoSiteList[comKey[index]][value[index].code].code
  })
  emits('value', form)
}

// 获取省市区数据
async function getAreaList() {
  // 获取收稻数据
  loading.value = true
  const { data } = await getReq('/api/common/get-local-code-list').finally(() => { loading.value = false })
  const format = (obj: IObj) => {
    const newObj: IObj = {}
    Object.keys(obj).forEach((key: string) => {
      newObj[key] = { ...obj[key], code: `${obj[key].sdCode}` }
      delete newObj[key].sdCode
    })
    return newObj
  }
  shoudaoSiteList.province_list = format(data.pros)
  shoudaoSiteList.city_list = format(data.cities)
  shoudaoSiteList.county_list = format(data.distrists)
  // 设置vant组件数据
  const vantData = <IObj>{}
  comKey.forEach((key: string) => {
    vantData[key] = formatAreaList(shoudaoSiteList[key])
  })
  AreaList.value = vantData
  // 默认选择项
  if (formCode) {
    Object.keys(shoudaoSiteList.county_list).forEach((key: string) => {
      if (shoudaoSiteList.county_list[key].code === formCode) {
        defValue.value = key
      }
    })
  }
}
getAreaList()

</script>

<template>
  <div class="site_select">
    <van-area :area-list="AreaList" :columns-num="columnsNum" :loading="loading" :title="title" :value="defValue" :visible-item-count="4" @cancel="cancel" @confirm="ok" />
  </div>
</template>

<style lang="less" scoped>
.site_select {
  width: 100vw;
  height: 38vh;
  background: white;
  padding-bottom: 20rpx;
}
</style>
